<template>
	<div>
		<div class="Overview_Analysis_top">
			<div class="Analysis_top_d1">
				<a-space>
					<a-date-picker @change="handleOperator" picker="year" valueFormat="YYYY" v-model:value="queryParams.year" />
				</a-space>
			</div>
			<div class="Analysis_top_d2">
				<a-space>
					<span>切换运营商</span>
					<a-select ref="select" v-model:value="queryParams.operatorId" style="width: 16rem" @change="handleOperator">
						<a-select-option v-for="item in operatorIdList" :value="item.value">{{ item.label }}</a-select-option>
					</a-select>
				</a-space>
			</div>
			<!-- <div class="Analysis_top_d3">
				<a-space>
					<span>切换城市</span>
					<a-select v-model:value="queryParams.cityId" style="width: 8rem" @change="handleCitySel">
						<a-select-option v-for="item in optionCity" :value="item.value">{{ item.label }}</a-select-option>
					</a-select>
				</a-space>
			</div> -->
			<div class="Analysis_top_d4">
				<a-space>
					<span>切换充电站</span>
					<a-select ref="select" v-model:value="queryParams.chargeStationId" style="width: 18rem" @change="handleOperator">
						<a-select-option v-for="item in stationIdList" :value="item.value">{{ item.label }}</a-select-option>
					</a-select>
				</a-space>
			</div>
		</div>
		<div class="Analysis_card">
			<GrowCard :GrowCardData="GrowCardData"></GrowCard>
		</div>
		<!-- 第二行数据 -->
		<div class="Analysis_card_ele">
			<div class="md:flex card_row">
				<Card size="small" :canExpan="false" class="card_4">
					<div class="charge_trend">
						<Title analysisTitle="充电量趋势分析"></Title>
						<div class="charge_trend_switch">
							<div class="charge_trend_switch_left" :class="switchCount == 0 ? 'switch_active' : 'switch_hover'" @click="handleTrendSwitch(0)">充电电量</div>
							<div class="charge_trend_switch_right" :class="switchCount == 1 ? 'switch_active' : 'switch_hover1'" @click="handleTrendSwitch(1)">充电次数</div>
						</div>
					</div>
					<div class="echarts">
						<div class="echarts_left">
							<!-- 充电电量 -->
							<div v-if="switchCount == 0">
								<Bar :grid="{left: '50%'}" :chartData="barData" height="280px" />
							</div>
							<div v-if="switchCount == 1">
								<BrokenLine :chartData="chartCountData" height="280px" />
							</div>
						</div>
						<div class="echarts_right">
							<Circle :chartData="cirData" height="280px" />
							<div class="cir_tit">*春季（3月-5月） 夏季（6月-8月） 秋季（9月-11月） 冬季（12月-2月）</div>
						</div>
					</div>
				</Card>

				<Card size="small" :canExpan="false" class="card_5">
					<div>
						<Title analysisTitle="用户柔性充电分析"></Title>
					</div>
					<div class="card_5_pie">
						<Pie :chartData="avaChart" height="280px" />
						<div class="title">
							<div class="title_top">
								<div>{{ avaChart.ratio }}</div>
								<div>平均柔性充电系数</div>
							</div>
							<div class="title_bom">
								<div class="title_bom_left">
									<div>{{ avaChart.lastYear }}</div>
									<div>上一年度</div>
								</div>
								<div class="title_bom_right">
									<div class="title_bom_right_count">
										<div>{{ avaChart.YOY }} <span>%</span></div>
										<div>同比</div>
									</div>

									<img class="right_img card_img_up" :src="img6" alt="" />
								</div>
							</div>
						</div>
					</div>
				</Card>
			</div>
			<!-- 第三行数据 -->
			<div class="md:flex enter-y card_row">
				<Card size="small" :canExpan="false" class="md:w-1/3 w-full min_3">
					<div>
						<Title analysisTitle="用户充电时长统计"></Title>
					</div>
					<div>
						<ChargeTime :chartData="chargeTimeData" height="280px" />
					</div>
				</Card>
				<Card size="small" :canExpan="false" class="md:w-1/3 !md:mx-4 !md:my-0 !my-4 w-full min_3">
					<div>
						<Title analysisTitle="用户充电时段分布"></Title>
					</div>
					<div class="user_charge_time">
						<!-- 备注 -->
						<div class="time_type">
							<div class="time_type_item">
								<div class="icon"></div>
								<div class="text">峰</div>
							</div>
							<div class="time_type_item">
								<div class="icon icon2"></div>
								<div class="text">平</div>
							</div>
							<div class="time_type_item">
								<div class="icon icon3"></div>
								<div class="text">谷</div>
							</div>
						</div>
						<BarDis :chartData="chargeDisData" height="280px" />
					</div>
				</Card>
				<Card size="small" :canExpan="false" class="md:w-1/3 w-full min_3">
					<div>
						<Title analysisTitle="常用充电桩功率分布"></Title>
					</div>
					<div>
						<BarBevel :chartData="stateData" height="280px" />
					</div>
				</Card>
			</div>
			<!-- 第四行数据-->
			<div class="md:flex card_row">
				<Card size="small" :canExpan="false" class="card_3">
					<div>
						<Title analysisTitle="服务充电车辆趋势分析"></Title>
					</div>

					<div>
						<BrokenLine :chartData="carServeData" height="280px" />
					</div>
				</Card>

				<Card size="small" :canExpan="false" class="card_2">
					<div>
						<Title analysisTitle="充电前后车辆SOC特征"></Title>
					</div>
					<div>
						<ChargeSoc :chartData="socData" height="280px" />
					</div>
				</Card>
			</div>
			<!--第五行数据 -->
			<div class="md:flex card_row">
				<Card size="small" :canExpan="false" class="card_3">
					<div>
						<Title analysisTitle="城市充电数据排行(top10)"></Title>
					</div>
					<div>
						<BarRank :chartData="chargeRankData" height="280px" />
					</div>
				</Card>
				<Card size="small" :canExpan="false" class="card_2">
					<div class="charge_trend">
						<Title analysisTitle="用户跨城市/运营商充电特征"></Title>
						<div class="charge_trend_switch">
							<div class="charge_trend_switch_left" style="width: 60px" :class="switchCityCount == 0 ? 'switch_active' : 'switch_hover'" @click="handleCitySwitch(0)">城市</div>
							<div class="charge_trend_switch_right" style="width: 60px" :class="switchCityCount == 1 ? 'switch_active' : 'switch_hover1'" @click="handleCitySwitch(1)">运营商</div>
						</div>
					</div>
					<div class="user_trend">
						<PieUser :chartData="userCityData" height="280px" :titleValue="userTitle" />
						<div class="user_trend_bi">
							<div>同比上年</div>
							<div>{{ upData }}%</div>
							<img class="card_img_up" :src="img6" alt="" />
						</div>
					</div>
				</Card>
			</div>
		</div>
	</div>
</template>

<script lang="js" name="test-bizWarningInfo" setup>
import { ref, reactive, computed, unref } from 'vue';
import { Tag, Card } from 'ant-design-vue';
import GrowCard from './components/GrowCard.vue';
import Title from './components/Title.vue';
import Bar from './components/chart/BarGroud.vue';
import Circle from './components/chart/Circle.vue';
import ChargeTime from './components/chart/ChargeTime.vue';
import BarDis from './components/chart/Bar.vue';
import BarRank from './components/chart/BarRank.vue';
import BrokenLine from './components/chart/BrokenLine.vue';
import ChargeSoc from './components/chart/BarSoc.vue';
import BarBevel from './components/chart/BarBevel.vue';
import Pie from './components/chart/Pie.vue';
import PieUser from './components/chart/PieUser.vue';

import img6 from '@/assets/images/overviewAnalysis/u11.svg';
import img7 from '@/assets/images/overviewAnalysis/u12.svg';

import { useRootSetting } from '/@/hooks/setting/useRootSetting';
import {getcrossCityOrOperator,getcityChargingDataRanking,getserviceChargingVehicles, getTopAvgValue, getchargingCapacityTrendAnalysis, getchargingTimeAnalysis, getchargingPeriodAnalysis, getchargingStakeAnalysis, getchargingStartEndSOC } from '/@/api/ChargingBehaviorAnalysis/OverviewAnalysis.js';
import { useYewuStore } from '/@/store/modules/yewu';
const YewuStor = useYewuStore();
// 充电站查询列表
const stationIdList = ref([]);
// 运营商查询列表
const operatorIdList = ref([]);
// 运营商查询列表
const queryParams = ref({
	year: '2025',
	operatorId: null,
	chargeStationId: null,
});

const handleOperator = () => {
	console.log('handleCitySel', queryParams.value)
	handleStyleChange()
};

// 城市
const optionCity = [
	{
		value: '全部',
		label: '全部',
	},
	{
		value: '北京',
		label: '北京',
	},
	{
		value: '上海',
		label: '上海',
	},
];
const handleCitySel = () => {

};

const handleStation = () => { };

// 第二行数据  左  充电量 开关切换

const switchCount = ref(0);
const handleTrendSwitch = (type) => {
	switchCount.value = type;
};

const barData = ref([]);
// for (let i = 0; i < 12; i += 1) {
// 	barData.value.push({
// 		name: `${i + 1}`,
// 		value: Math.floor(Math.random() * 10) + 110,
// 	});
// }
// 充电次数
const chartCountData = ref([
	{ name: '1', value: 2987 },
	{ name: '2', value: 4987 },
	{ name: '3', value: 5987 },
	{ name: '4', value: 7987 },
	{ name: '5', value: 9987 },
	{ name: '6', value: 3987 },
	{ name: '7', value: 2987 },
	{ name: '8', value: 6987 },
	{ name: '9', value: 8987 },
	{ name: '10', value: 4987 },
	{ name: '11', value: 3987 },
	{ name: '12', value: 6987 },
]);
const cirData = ref([
	{ name: '春季', value: 30 },
	{ name: '夏季', value: 10 },
	{ name: '秋季', value: 15 },
	{ name: '冬季', value: 23 },
]);
// 右数据

const avaChart = {
	count: 50,
	ratio: 0.16,
	lastYear: 15,
	YOY: 14.5,
};

// 第三行数据  左
const chargeTimeData = ref([
	// { name: '>3h', value: 4 },
	// { name: '1.5h~3h', value: 23 },
	// { name: '1h~1.5h', value: 34 },
	// { name: '0.5~1h', value: 47 },
	// { name: '<0.5h', value: 62 },
]);
// 中
const chargeDisData = ref([
	// { name: '0', value: 30 },
	// { name: '7-10', value: 10 },
	// { name: '11-14', value: 15 },
	// { name: '15-17', value: 23 },
	// { name: '18-20', value: 23 },
	// { name: '21-23', value: 23 },
]);

// 右
const stateData = ref([
	// { name: '<10', value: 274 },
	// { name: '10-30', value: 474 },
	// { name: '30-60', value: 174 },
	// { name: '60-120', value: 574 },
	// { name: '120-200', value: 74 },
	// { name: '>200', value: 574 },
]);

// 第四行数据 左 服务充电车辆趋势分析
const carServeData = ref([
	{ name: '1', value: 2987 },
	{ name: '2', value: 4987 },
	{ name: '3', value: 5987 },
	{ name: '4', value: 7987 },
	{ name: '5', value: 9987 },
	{ name: '6', value: 3987 },
	{ name: '7', value: 2987 },
	{ name: '8', value: 6987 },
	{ name: '9', value: 8987 },
	{ name: '10', value: 4987 },
	{ name: '11', value: 3987 },
	{ name: '12', value: 6987 },
]);
// 四 右 充电前后车辆SOC特征
const socData = ref({
	start: {
		name: '起始充电SOC（%）',
		data: [
			// {
			// 	value: 5,
			// 	label: '1-10',
			// },
			// {
			// 	value: 12,
			// 	label: '10-20',
			// },
			// {
			// 	value: 24,
			// 	label: '20-30',
			// },
			// {
			// 	value: 32,
			// 	label: '30-40',
			// },
			// {
			// 	value: 42,
			// 	label: '40 -50',
			// },
		],
	},
	end: {
		name: '结束充电SOC（%）',
		data: [
			// {
			// 	value: 5,
			// 	label: '50-60',
			// },
			// {
			// 	value: 19,
			// 	label: '60-70',
			// },
			// {
			// 	value: 23,
			// 	label: '70-80',
			// },
			// {
			// 	value: 43,
			// 	label: '80-90',
			// },
			// {
			// 	value: 34,
			// 	label: '90-100',
			// },
		],
	},
});

// 第五行数据  左 城市充电数据排行
const chargeRankData = ref([
	{ name: '成都', value: 30 },
	{ name: '唐山', value: 10 },
	{ name: '武汉', value: 15 },
	{ name: '上海', value: 23 },
	{ name: '青岛', value: 23 },
	{ name: '广东', value: 23 },
	{ name: '西安', value: 23 },
	{ name: '重庆', value: 23 },
	{ name: '北京', value: 23 },
	{ name: '长沙', value: 23 },
]);

//第五行数据  右 用户跨城市/运营商充电特征
const switchCityCount = ref(0);
// 同比数据
let upData = ref(19);
const userCityData = ref([
	{ name: '不跨城', value: 364 },
	{ name: '跨1城', value: 2364 },
	{ name: '跨2城', value: 3364 },
	{ name: '跨3城', value: 164 },
	{ name: '跨4城以上', value: 664 },
]);
const userTitle = {
	title: '跨运营商充电占比',
	proportion: '33.25%',
};
// 用户行为分析-概览分析-充电量趋势分析
function getchargingCapacityTrendAnalysisApi(params) {
	getchargingCapacityTrendAnalysis(params)
		.then((res) => {
			console.log('getchargingCapacityTrendAnalysis', res);
			barData.value = res.monthVOs.map((item) => {
				return {
					name: item.month + '月',
					value: item.power,
				};
			});
			console.log('barData.value', barData.value);
			chartCountData.value = res.monthVOs.map((item) => {
				return {
					name: item.month + '月',
					value: item.times,
				};
			});
			console.log('chartCountData.value', chartCountData.value);

			cirData.value = res.seasonVOs.map((item) => {
				return {
					name: item.season,
					value: item.power,
					rate: item.rate,
				};
			});


		})
		.catch((error) => {
			console.error('getchargingCapacityTrendAnalysis:', error);
		});

}
// 用户行为分析-概览分析-常用充电桩功率统计
function fetchgetchargingStakeAnalysis(params) {
	getchargingStakeAnalysis(params)
		.then((res) => {
			console.log('getchargingStakeAnalysis', res);
			stateData.value = res.map((item) => {
				return {
					name: item.ratedPowerGroup,
					value: item.chargingTimes,
				};
			});
		})
}
// 用户行为分析 - 概览分析 - 充电时段分析
function fetchgetchargingPeriodAnalysis(params) {
	getchargingPeriodAnalysis(params)
		.then((res) => {
			console.log('getchargingPeriodAnalysis', res);
			chargeDisData.value = res.map((item) => {
				return {
					name: item.chargingTime,
					value: Number(item.electric),

				};
			})
			console.log('chargeDisData.value', chargeDisData.value)
		})
}
// 用户行为分析-概览分析-用户充电时长分析
function fetchgetchargingTimeAnalysis(params) {
	getchargingTimeAnalysis(params)
		.then((res) => {
			console.log('getTopAvgValue', res);
			chargeTimeData.value = res.map((item) => {

				return {
					name: item.remark,
					value: item.times,
					timesRate: item.timesRate,
				};
			});

		})
		.catch((error) => {
			console.error(' 用户行为分析-概览分析-用户充电时长分析:', error);
		});
}
// 用户行为分析-概览分析-顶部平均值查询 year
const GrowCardData = ref({});
function fetchTopAvgValue(params) {
	getTopAvgValue(params)
		.then((res) => {
			console.log('getTopAvgValue', res);

			GrowCardData.value = res;
		})
		.catch((error) => {
			console.error(' 用户行为分析-概览分析-顶部平均值查询:', error);
		});
}
// getchargingStartEndSOC  用户行为分析-概览分析-充电起止SOC
function fetchgetchargingStartEndSOC(params) {
	getchargingStartEndSOC(params)
		.then((res) => {
			console.log('getchargingStartEndSOC', res);
			socData.value.start.data = res.startSOCList.map((item) => {
				return {
					value: Number(item.socCount),
					label: item.socGroup,
				};
			});
			socData.value.end.data = res.endSOCList.map((item) => {
				return {
					value: Number(item.socCount),
					label: item.socGroup,
				};
			});
			console.log('socDatasocDatasocData', socData.value);

		})

}
// 服务充电车辆趋势分析
function fetchgetserviceChargingVehiclesApi(params) {
	getserviceChargingVehicles(params)
		.then((res) => {
			console.log('getserviceChargingVehicles', res);
			carServeData.value = res.map((item) => {
				return {
					value: Number(item.times),
					name: item.month,
				};
			});
		})
}
// 城市充电数据排行
function fetchgetcityChargingDataRanking(params) {
	getcityChargingDataRanking(params)
		.then((res) => {
			console.log('getcityChargingDataRanking', res);
			chargeRankData.value = res.map((item) => {
				return {
					value: Number(item.power),
					name: item.city,
				};
			});
		})
}

// 运营商充电特征
function fetchgetcrossCityOrOperator(params) {
	getcrossCityOrOperator(params)
		.then((res) => {
			console.log('getcrossCityOrOperator', res);
			userCityData.value = res.map((item) => {
				return {
					value: Number(item.vehicleCount),
					name: item.crossType,
					percentage:item.percentage
				};
			});
		})
}
const handleCitySwitch = (type) => {
	switchCityCount.value = type;
	// 切换接口数据
	// userCityData  数据  title userTitle
};
function handleStyleChange(type) {
	fetchTopAvgValue(queryParams.value);
	getchargingCapacityTrendAnalysisApi(queryParams.value)
	fetchgetchargingTimeAnalysis(queryParams.value)
	fetchgetchargingPeriodAnalysis(queryParams.value)
	fetchgetchargingStakeAnalysis(queryParams.value)
	fetchgetchargingStartEndSOC(queryParams.value)
	fetchgetserviceChargingVehiclesApi(queryParams.value)
	fetchgetcityChargingDataRanking(queryParams.value)
	fetchgetcrossCityOrOperator(queryParams.value)
	
}
onMounted(() => {
	handleStyleChange();
	setTimeout(() => {
		operatorIdList.value = YewuStor.operatorIdList;
		stationIdList.value = YewuStor.stationIdList;
	}, 1000);
});
</script>

<style lang="less" scoped>
:deep(.ant-picker),
:deep(.ant-input-number) {
	width: 100%;
}

.Overview_Analysis_top {
	display: flex;
	padding-left: 20px;
	padding-top: 20px;

	.Analysis_top_d1 {
		margin-right: 40px;
	}

	.Analysis_top_d2 {
		margin-right: 40px;
	}

	.Analysis_top_d3 {
		margin-right: 40px;
	}
}

.Analysis_card {
	padding: 20px;
}

.Analysis_card_ele {
	padding: 0 1.25rem;
}

.card_4 {
	flex: 1;
	margin-right: 1.25rem;
	min-width: 63.75rem;
}

.card_5 {
	width: calc(20% - 1rem);
	min-width: 15rem;
	// margin-left: 0.625rem;
}

.card_3 {
	flex: 1;
	margin-right: 1.25rem;
	min-width: 47.5rem;
}

.card_2 {
	width: calc(40% - 0.75rem);
	min-width: 31.25rem;
}

.enter-y {
	margin-top: 1.25rem;
}

.min_3 {
	min-width: 25.625rem;
}

.card_row {
	margin-bottom: 1.25rem;
	height: 20rem;
}

.charge_trend {
	display: flex;
	justify-content: space-between;
	align-items: center;

	.charge_trend_switch {
		box-sizing: border-box;
		height: 1.625rem;
		display: flex;
		align-items: center;
		background: inherit;

		box-sizing: border-box;

		.charge_trend_switch_left,
		.charge_trend_switch_right {
			width: 5.5rem;
			text-align: center;
			cursor: pointer;
			border-width: 1px;
			border-radius: 5px 0 0 5px;
			border-style: solid;
			border-color: #d9d9d9;
			color: #4c4c4c;
		}

		.charge_trend_switch_right {
			border-radius: 0 5px 5px 0;
			// border-left: rgba(189, 189, 189, 1) solid 1px;
		}

		.switch_active {
			color: #009688;
			border: #009688 solid 1px;
		}

		.switch_hover:hover {
			// background: #f2f2f2;
			color: #009688;
			// border:#009688 solid 1px;
			border-radius: 5px 0 0 5px;
		}

		.switch_hover1:hover {
			color: #009688;
			// border:#009688 solid 1px;
			border-radius: 0 5px 5px 0;
		}
	}
}

.echarts {
	width: 100%;
	display: flex;
}

.echarts_left {
	width: 60%;
}

.echarts_right {
	width: 40%;
	position: relative;

	.cir_tit {
		position: absolute;
		bottom: 20px;
		left: 30px;
		font-size: 12px;
		color: #929ea9;
	}
}

.card_5_pie {
	position: relative;

	.title {
		position: absolute;
		left: 10%;
		top: 28%;
		width: 80%;

		.title_top {
			text-align: center;

			div:nth-child(1) {
				font-size: 1.875rem;
				color: #333;
			}

			div:nth-child(2) {
				font-size: 0.875rem;
				color: #7d8590;
			}

			margin-bottom: 1.875rem;
		}

		.title_bom {
			display: flex;
			justify-content: space-between;

			.title_bom_left {
				div:nth-child(1) {
					font-size: 1.75rem;
					color: #333;
				}
			}

			.title_bom_right {
				position: relative;
				text-align: center;
				display: flex;
				align-items: center;

				.title_bom_right_count {
					position: relative;

					div:nth-child(1) {
						font-size: 1.75rem;
						color: #333;

						span {
							font-size: 10px;
							position: absolute;
							right: -0.625rem;
							top: 0.5rem;
						}
					}
				}

				.right_img {
					width: 12px;
					height: 13px;
					margin-left: 0.725rem;
				}
			}
		}
	}
}

.user_trend {
	position: relative;

	.user_trend_bi {
		width: 50%;

		position: absolute;
		left: 0;
		bottom: 5%;
		display: flex;
		align-items: center;
		justify-content: center;

		div:nth-child(1) {
			margin-right: 15px;
			font-size: 0.75rem;
			color: rgb(125, 133, 144);
		}

		div:nth-child(2) {
			margin-right: 15px;
			font-size: 0.75rem;
			color: rgb(125, 133, 144);
		}

		img {
			width: 0.75rem;
			height: 0.75rem;
		}
	}
}

.card_img_up {
	transform: scaleY(-1);
}

.user_charge_time {
	position: relative;

	.time_type {
		display: flex;
		position: absolute;
		right: 0.25rem;
		top: 1rem;

		.time_type_item {
			display: flex;
			color: #000000;
			width: 3rem;
			align-items: center;

			.icon {
				width: 5px;
				height: 5px;
				background: #ff9447;
				margin-right: 0.5rem;
			}

			.icon2 {
				background: #1890ff;
			}

			.icon3 {
				background: #30e8bb;
			}
		}
	}
}
</style>
